1 00:00:00,690 --> 00:00:03,410 Hello and welcome to this lecture. 2 00:00:03,600 --> 00:00:12,600 In this lecture we will be creating the functionality for our app using javascript. 3 00:00:13,230 --> 00:00:16,890 So this this what the app looks like at the moment. 4 00:00:16,890 --> 00:00:19,770 There is no functionality. 5 00:00:19,770 --> 00:00:21,030 There is a word in there. 6 00:00:21,030 --> 00:00:23,050 I click on this button here. 7 00:00:23,100 --> 00:00:30,030 Nothing will happen because the Jabr scrip function has not been implement it. 8 00:00:30,030 --> 00:00:32,640 So we're going to do that now. 9 00:00:32,700 --> 00:00:36,960 So this is our blank javascript moment. 10 00:00:37,050 --> 00:00:39,180 So what I'm going to do to save time. 11 00:00:39,210 --> 00:00:43,360 I've already written the cuts I'm just going to pace in. 12 00:00:43,470 --> 00:00:49,530 So this is our code that will create live functionality for our app. 13 00:00:49,530 --> 00:00:55,820 I will just explain the code step by step plan one here. 14 00:00:55,860 --> 00:00:59,210 I have declared a variable variable. 15 00:00:59,220 --> 00:01:07,850 Basically it's a way of store in value in Javascript variable control list all one value at a time. 16 00:01:08,190 --> 00:01:14,480 So I've created a variable in the world V are and I have called it print. 17 00:01:15,090 --> 00:01:21,770 When you create variables you can also give it a value at the same time you create it. 18 00:01:21,780 --> 00:01:25,890 So I'm giving the value here equal to function. 19 00:01:25,890 --> 00:01:34,730 This function here has given the function takes in one argument or one parameter which is m s chief. 20 00:01:34,920 --> 00:01:37,590 So does this what is m s t. 21 00:01:37,590 --> 00:01:41,700 Here is the word that someone will tie a pencil. 22 00:01:41,700 --> 00:01:46,200 This is a function argument. 23 00:01:46,200 --> 00:01:49,650 So when you create a variable you can make. 24 00:01:49,650 --> 00:01:52,630 You can let your King set the value. 25 00:01:52,760 --> 00:02:01,070 Took the squaw's to a function as well a function you specify a function with a Param river. 26 00:02:01,110 --> 00:02:02,980 You can have an empty pair with. 27 00:02:03,030 --> 00:02:11,610 Or you can pass in something half past 10 m s t here will K which is a message in between this curly 28 00:02:11,610 --> 00:02:12,120 braces. 29 00:02:12,110 --> 00:02:19,130 Here this is the opaline and this is the closing on line 5 as closing curly braces. 30 00:02:19,500 --> 00:02:23,360 In between is what the function will do. 31 00:02:23,730 --> 00:02:30,940 So it's saying here what is saying here's that document. 32 00:02:31,140 --> 00:02:34,600 Don't get element by the output. 33 00:02:35,130 --> 00:02:38,430 Okay will this value here. 34 00:02:38,430 --> 00:02:40,550 Did document a great element. 35 00:02:40,640 --> 00:02:41,630 Hey. 36 00:02:42,210 --> 00:02:43,530 Which is the hard part here. 37 00:02:43,530 --> 00:02:48,610 Whatever we're typing here will output underneath here. 38 00:02:48,690 --> 00:02:49,890 That's what I say. 39 00:02:49,950 --> 00:02:55,650 Okay so documentor get element back Heidi which is output this output. 40 00:02:55,650 --> 00:03:01,000 Here is an idea that was specified in the hastier mail which is this. 41 00:03:01,060 --> 00:03:05,680 This is what is talking about this here on line 16. 42 00:03:06,040 --> 00:03:15,630 Okay so how to get that Heidi and then replace the in a hasty mail which is mean. 43 00:03:15,830 --> 00:03:18,080 Tim here in this case is blank. 44 00:03:18,080 --> 00:03:19,390 There is no text there. 45 00:03:19,590 --> 00:03:27,450 So easy to replace whatever is there with whatever you've typed in. 46 00:03:27,900 --> 00:03:37,110 Okay so in this case I have to say for example what I typed in the word hell so it will replace whatever 47 00:03:37,140 --> 00:03:40,800 is there with the helo. 48 00:03:40,810 --> 00:03:42,360 I have typed in there. 49 00:03:44,130 --> 00:03:44,650 Of came. 50 00:03:44,660 --> 00:03:55,330 Plus the message that's that's whatever it will display this text relend is plus whatever a tight team. 51 00:03:55,330 --> 00:04:00,390 So anything high typing is what this msee refers to here. 52 00:04:00,730 --> 00:04:04,970 Okay so this word I typed in hello is what is talkin about. 53 00:04:04,990 --> 00:04:05,380 Hello. 54 00:04:05,380 --> 00:04:09,960 Here he is represented by his msee which is messy. 55 00:04:10,180 --> 00:04:12,260 So it will now display. 56 00:04:12,850 --> 00:04:19,750 Lent is what they're talking as an emissary which in my case in that example was. 57 00:04:19,810 --> 00:04:20,520 Hello. 58 00:04:20,730 --> 00:04:21,240 All right. 59 00:04:21,370 --> 00:04:25,930 So that's what the function will do. 60 00:04:26,050 --> 00:04:26,500 All right. 61 00:04:26,500 --> 00:04:33,350 On line 7 here we've got another function here built in function Wackies documents. 62 00:04:33,370 --> 00:04:35,710 And don't get elemen. 63 00:04:35,730 --> 00:04:41,190 I mean the idea here is button which has been defined here. 64 00:04:41,200 --> 00:04:41,870 Button. 65 00:04:42,010 --> 00:04:42,870 Okay. 66 00:04:42,890 --> 00:04:46,890 And this is text between the button. 67 00:04:47,180 --> 00:04:51,520 K. So what it's saying is get that element by its idea. 68 00:04:52,060 --> 00:05:01,100 And when you and they have attached to an event handler which is the dot on click is an event handler 69 00:05:01,870 --> 00:05:06,470 which means because there's a button when the button is clicked. 70 00:05:06,490 --> 00:05:13,120 This event happened like here will handle what will happen when the button is clicked. 71 00:05:13,150 --> 00:05:16,360 That's what this click means is an event handler. 72 00:05:16,630 --> 00:05:21,490 So when they click on this event handler will be equal do is function. 73 00:05:21,500 --> 00:05:27,460 Here of course will function and then the event or the event. 74 00:05:27,490 --> 00:05:34,270 In this case could be anything in the event here is an art click so it will pass in that event which 75 00:05:34,270 --> 00:05:42,770 will be whatever's been typed in and it will then print documents get element I.D. this brinkema's Display 76 00:05:43,330 --> 00:05:46,510 it to display documentor get limber. 77 00:05:46,600 --> 00:05:49,580 The idea here is think it is a string. 78 00:05:50,050 --> 00:06:00,310 If I go back to my highest email here this drink here refers to the input tag here so it will grab this 79 00:06:00,380 --> 00:06:05,750 eidy and then determine the value of the left. 80 00:06:05,750 --> 00:06:12,120 So this is how you determine the lente value of a word dot value dot length. 81 00:06:12,400 --> 00:06:19,600 Okay save it whatever string have passed send So if I pass in Hello It will determine the length of 82 00:06:19,600 --> 00:06:21,940 that helo using this method. 83 00:06:21,940 --> 00:06:24,030 Dot value don't float. 84 00:06:24,250 --> 00:06:29,270 This is what determines the length of the word. 85 00:06:29,500 --> 00:06:40,960 Okay so this is how you would implement the javascript responsible for determining the word lentzsch 86 00:06:41,290 --> 00:06:43,280 you type into an input box. 87 00:06:43,300 --> 00:06:55,940 If I save this now save or go back to a document if I refresh this and type typing fair typing in VAX 88 00:06:59,050 --> 00:07:06,850 angle kochel it tells me the lentzsch is 6 so you can see the application is now working correctly. 89 00:07:06,880 --> 00:07:13,310 Now that we've implemented a javascript court that's sit for this lecture. 90 00:07:13,600 --> 00:07:21,480 So in this section we have successfully created an app that we can use to cackle late length off word. 91 00:07:21,580 --> 00:07:23,170 Thanks for much for watching. 92 00:07:23,170 --> 00:07:31,150 Please let me know if you have any questions or are there any aspects of the project you do not understand. 93 00:07:31,240 --> 00:07:33,550 Be more than happy to help. 94 00:07:33,670 --> 00:07:34,750 Thank you. 95 00:07:34,750 --> 00:07:35,960 Bye for now.